<template>
<div>

<div class="i-layout-page-header">
    <PageHeader class="product_tabs" hidden-breadcrumb style="padding:0 32px;">
        <div slot="title" class="ivu-mt">
            <Button :to="{path:'/admin/article/sort_relation'}" icon="ios-arrow-back" size="small" class="mr20">返回</Button>
            <span v-text="$route.meta.title" class="mr20"></span>
        </div>
    </PageHeader>
</div>

<Card :bordered="false" dis-hover class="ivu-mt">
    <Form ref="formValidate" :label-width="labelWidth" :label-position="labelPosition" @submit.native.prevent>
        <Row type="flex">
            <Col v-bind="grid">
                <Button type="primary" icon="md-add" @click="onCreateSortCategory">添加文章分类</Button>
            </Col>
        </Row>
    </Form>
    <Divider dashed/>

    <Table
        ref="table"
        :columns="columns"
        :data="List"
        :loading="loading"
        highlight-row
        no-userFrom-text="暂无数据"
        no-filtered-userFrom-text="暂无筛选结果"
    >
        <template slot-scope="{ row }" slot="action">
            <a @click="onEditSortCategory(row.id)">编辑</a>
            <Divider type="vertical" />
            <a @click="onDelete(row.id)">删除</a>
        </template>
    </Table>

    <div class="acea-row row-right page">
        <Page
        	:total="total"
        	:current="searchForm.page"
        	:page-size="searchForm.limit"
        	@on-change="onPageChange"
        />
    </div>
</Card>

</div>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
import { getList, create, edit } from '@/api/content/sortCategory'

export default {
	name: 'content_article_SortCategory',
	data () {
		return {
			searchForm: {
				page: 1,
				limit: 10,
            },

            columns: [
                {
                    title: '序号',
                    type: 'index',
                    maxWidth: 260
                },
                {
                    title: '分类昵称',
                    key: 'title',
                    minWidth: 120
                },
                {
                    title: '分类排序',
                    key: 'sort',
                    minWidth: 120
                },
                {
                    title: '操作',
                    slot: 'action',
                    fixed: 'right',
                    minWidth: 150
                }
            ],
            List: [],
            loading: false,
            total: 0,

            grid: {
                xl: 7,
                lg: 7,
                md: 12,
                sm: 24,
                xs: 24
            },

		}
	},
    computed: {
        ...mapState('admin/layout', [
            'isMobile'
        ]),
        labelWidth () {
            return this.isMobile ? undefined : 75;
        },
        labelPosition () {
            return this.isMobile ? 'top' : 'right';
        }
    },
	mounted () {
	  this.getList()
	},
	methods: {
		// ######################################################################################################################
		// # 文章分类管理 显示资源列表 操作方法
		// ######################################################################################################################

		// 显示资源列表
		getList () {
			this.loading = true
			getList(this.searchForm).then(async res => {
				if (res.status === 200) {
                    this.List = res.data.list
                    this.total = res.data.count
				} else {
					this.$Notice.error( {title: res.msg} )
				}
				this.loading = false
			}).catch(res => {
				this.loading = false
				this.$Notice.error( {title: res.msg} )
			})
		},

        // 删除指定资源
        onDelete (id) {
            let delfromData = {
                title: '删除文章分类',
                url: `content/sort/${id}`,
                method: 'DELETE',
            }
            this.$modalSure(delfromData).then((res) => {
                this.$Message.success('删除成功');
                this.getList();
            }).catch(res => {
                this.$Message.error(res.msg);
            })
        },

        // 添加人才分类弹窗
        onCreateSortCategory() {
            this.$modalForm(create()).then(() => this.getList());
        },

        // 编辑人才分类弹窗
        onEditSortCategory(id) {
            this.$modalForm(edit(id)).then(() => this.getList());
        },

		// ######################################################################################################################
		// # 其他 vue 操作方法
		// ######################################################################################################################

        // 分页
        onPageChange (index) {
            this.searchForm.page = index
            this.getList()
        },

    }
}
</script>

<style scoped>

</style>
